<template>
  <div class='container'>
    <el-dialog
      :title="row.id !== undefined ? '修改目录': '新增目录'"
      :visible.sync="dialogVisible"
      :close-on-click-modal= false
      width="30%"
      @close="closedialogVisible"
      @open="opendialogVisible"
      >
      <!--表单区域 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item v-show="subjectID === undefined" label="所属学科">
          <el-select v-model="form.subjectID" placeholder="请选择所属学科">
            <el-option v-for="item in sunList" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="form.tagName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
       <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addtagName">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple as subList } from '@/api/hmmm/subjects.js'
import { add, update } from '@/api/hmmm/tags.js'
export default {
  name: 'Tag-component',
  props: {
    value: {
      type: Boolean
    },
    isSubjectID: {
      type: Number
    },
    row: {
      type: Object
    }
  },
  data () {
    return {
      // 弹出层组件绑定数据
      form: {
        subjectID: null,
        tagName: ''
      },
      rules: {
        tagName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      },
      // 弹出层下拉列表数
      sunList: [],
      // 弹出层状态
      dialogVisible: this.value,
      // 路由传入的id
      subjectID: this.isSubjectID
      // 点击修改传入的id
      // id: null
    }
  },
  // 事件处理
  methods: {
    // 修改按钮数据回显 在获取学科列表之后调用
    changeRow () {
      console.log(888)
      if (this.row.id !== undefined) {
        const { id, tagName, subjectID } = this.row
        this.id = id
        this.form.subjectID = subjectID
        this.form.tagName = tagName
      }
    },
    // 修改使用的接口请求
    async updatetagName () {
      try {
        const res = await update({ ...this.form, id: this.row.id })
        console.log(res)
        this.$message.success('修改成功')
        this.dialogVisible = false
      } catch (error) {
        console.log(error)
        this.$message.success('修改失败')
        this.dialogVisible = false
      }
    },
    // 添加目录发送请求
    async Hadd () {
      console.log(this.form)
      try {
        if (this.subjectID !== undefined) {
          this.form.subjectID = this.subjectID
        }
        // console.log(id)tagName
        const res = await add({ ...this.form })
        console.log(res)
        this.$message.success('添加成功')
        // 关闭弹层
        this.dialogVisible = false
      } catch (error) {
        console.log(error)
        this.$message.error('添加失败')
        this.dialogVisible = false
      }
    },
    // 点击添加表单验证
    addtagName () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单通过添加数据
          if (this.row.id !== undefined) {
            // 有id调用修改
            this.updatetagName()
          } else {
            // 没有调用添加
            this.Hadd()
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 获取学科列表
    async getSUnList () {
      const res = await subList()
      console.log(11111)
      console.log('弹出层组件', res)
      this.sunList = res.data
      // 执行函数判断是否存在当前行
      // 存在数据回填
      this.changeRow()
    },
    // 取消关闭弹层
    close () {
      this.dialogVisible = false
    },
    // 点击新增按钮弹出层显示 调用接口获取学科列表
    opendialogVisible () {
      // 清空表单数据
      // console.log('11111')
      this.getSUnList()
    },
    // 关闭弹窗的时候调用的函数
    closedialogVisible () {
      // 清空表单数据
      this.form.subjectID = null
      this.form.tagName = ''
      // 请求成功让父组件刷新数据
      this.$emit('refTag')
      this.$emit('input', false)
    }
  },
  watch: {
    value (newVal) {
      this.dialogVisible = newVal
      // console.log(2222)
    },
    isSubjectID (newVal) {
      this.subjectID = newVal
    }
  }
}
</script>

<style lang='less' scoped>
.el-select{
  width: 100%;
}
</style>
